<template>
  <div>
    <el-transfer filterable :filter-method="filterMethod" filter-placeholder="请输入人员名称" :titles="['可选人员', '已选人员']" v-model="selected"
      :props="{
      key: 'userId',
      label: 'name'
        }" @change="selectChange" :data="availablePersons">
    </el-transfer>
  </div>
</template>
<script>
  export default {
    props: {
      availablePersons: {
        type: Array
      },
      selectedPersons: {
        type: Array
      }
    },
    data() {
      return {
        selected: this.selectedPersons,
        filterMethod(query, item) {
          return item.name.indexOf(query) > -1;
        }
      };
    },
    methods: {
      selectChange(val) {
        this.$emit('selectChange', this.selected);
      },
    },
    watch: {
        selectedPersons(newval) {
            this.selected = newval;
        }
    }
  };

</script>

